import { reset, useUserStore } from '@/stores/userStore.js'
import { Button, Menu, Modal } from 'antd'
import { AppstoreOutlined, ContainerOutlined, DesktopOutlined, MailOutlined, PieChartOutlined } from '@ant-design/icons'
import styles from './index.module.scss'
import MyBreadCrumb from '@/components/Breadcrumb/index.jsx'
import { Outlet, useNavigate } from 'react-router'
function getItem(label, key, icon, children, type) {
	return {
		key,
		icon,
		children,
		label,
		type,
	}
}

const items = [
	getItem('Home', 'home', <PieChartOutlined />),
	getItem('Products', 'products', <DesktopOutlined />),
	getItem('Option 3', '3', <ContainerOutlined />),
	getItem('Navigation One', 'sub1', <MailOutlined />, [
		getItem('Option 5', '5'),
		getItem('Option 6', '6'),
		getItem('Option 7', '7'),
		getItem('Option 8', '8'),
	]),
	getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
		getItem('Option 9', '9'),
		getItem('Option 10', '10'),
		getItem('Submenu', 'sub3', null, [getItem('Option 11', '11'), getItem('Option 12', '12')]),
	]),
]

function Dashboard(props) {
	const navigate = useNavigate()
	const token = useUserStore((state) => state.token)
	const userInfo = useUserStore((state) => state.userInfo)
	const handleLogout = () => {
		// useUserStore.persist.clearStorage()
		Modal.confirm({
			title: 'Confirm',
			content: '确认登出吗？',
			onOk: () => {
				reset()
				navigate('/login')
			},
			footer: (_, { OkBtn, CancelBtn }) => (
				<>
					<CancelBtn />
					<OkBtn />
				</>
			),
		})
	}
	const handleClickMenus = (e) => {
		console.log('click ', e)
		navigate(e.key)
	}
	return (
		<div className={styles.container}>
			<div className={styles.menus}>
				<div className={styles.title}>

				</div>
				<Menu defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} mode="inline" items={items} onClick={handleClickMenus}/>
			</div>
			<div className={styles.main}>
				<div className={styles.header}>
					<MyBreadCrumb />
					<div className={styles.headerRight}>
						<img src={userInfo.avatar} />
						<a onClick={handleLogout}>{userInfo.nickName} 登出</a>
					</div>
				</div>
				<div className={styles.content}>
					<Outlet />
				</div>
			</div>
		</div>
	)
}

export default Dashboard
